<template>
  <div class="mod-config">
    <basic-container>
      <navigation
        :sign="{ a: true, b: false, c: false, d: false, e: false }"
      ></navigation>
      <el-row>
        <el-col :span="10">
          <div class="boxsty zhiBiao">
            <el-tree
              :data="depts"
              :load="loadNode"
              show-checkbox
              ref="tree"
              lazy
              highlight-current
              :props="{
                children: 'children',
                label: 'name',
                isLeaf: 'isLeaf',
              }"
            >
            </el-tree>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="" style="text-align: center; margin-top: 200px">
            <el-button type="primary" @click="addUserToGroup">>></el-button>
            <el-button type="primary" @click="delUserAtGroup"><<</el-button>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="boxsty zhiBiao">
            <div class="margin-tb-20">
              <el-button type="primary" @click="addGroupVisible = true"
                >添加分组</el-button
              >
              <el-button type="primary" @click="delGroup">删除分组</el-button>
            </div>
            <el-table
              :data="groups"
              highlight-current-row
              @current-change="handleCurrentChange"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table
                    :data="props.row.users"
                    highlight-current-row
                    @current-change="handleUserChange"
                  >
                    <el-table-column label="人员编号" prop="erpBh" />
                    <el-table-column label="人员名称" prop="ryName" />
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="分组名称" prop="name"> </el-table-column>
              <el-table-column label="日期" prop="name"> </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </basic-container>
    <create-group
      :visible.sync="addGroupVisible"
      @cancel="addGroupVisible = false"
      @submit="addGroup"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import createGroup from "./components/create-group.vue";
import {
  getDept,
  getMyGroups,
  delGroup,
  addGroup,
} from "@/api/assessment/index";
export default {
  data() {
    return {
      addGroupVisible: false,
      depts: [],
      groups: [],
      selectedGroup: null,
      selectedUser: null,
    };
  },
  components: {
    createGroup,
  },
  created() {
    this.getDeptList();
    this.getMyGroups();
  },
  mounted() {},
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    addUserToGroup() {
      if(!this.selectedGroup){
          this.$message.warning("没有选择小组");
        return;
      }
     //console.log(this.$refs.tree.getCheckedNodes())
    },
    delUserAtGroup() {},
    handleUserChange(val) {
      this.selectedUser = val;
    },
    handleCurrentChange(val) {
      this.selectedGroup = val;
    },
    delGroup() {
      if (!this.selectedGroup) {
        this.$message.warning("没有选择小组");
        return;
      }
      delGroup({ groupId: this.selectedGroup.id }).then((res) => {
        this.getMyGroups();
      });
    },
    addGroup(data) {
      addGroup(data).then((res) => {
        this.getMyGroups();
        this.addGroupVisible = false
      });
    },
    loadNode(node, resolve) {
     //console.log(node);
      if (node.level === 0) {
        return resolve([]);
      }
      getDept({ parentId: node.data.id }).then((res) => {
        resolve(res.data.data);
      });
    },
    getDeptList(parentId) {
      getDept({ parentId }).then((res) => {
        this.depts = res.data.data;
      });
    },
    getMyGroups() {
      getMyGroups().then((res) => {
        this.groups = res.data.data;
      });
    },
  },
};
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>